<template style="">
	<view style="position: relative;">
		<view><Tab :tabList="tabList" @tabSelect="tabSelect" :tabActiveIdx="tabActiveIdx" /></view>
		<view style="margin-top:5upx;background: #f3f3f3;">
			<view v-if="tabActiveIdx === 0" style="padding: 20upx 0;">
				<image src="../../static/img/add.png" style="width: 45upx;height: 45upx;position: absolute;right: 40upx;top: 35upx;" @tap="value2=!value2"></image>
				<view class="tabs" v-for="(item, index) in infos" :key="index" v-if="infos.length > 0">
					<view class="tabs-img"><image src="../../static/img/logo.png" mode="true"></image></view>
					<view class="tabs-t">
						<view class="tabs-t1">{{ item.title }}</view>
						<view class="tabs-t2">{{ item.date }}</view>
					</view>
				</view>
				<view class="more-data" v-if="infos.length > 0">--------无更多数据--------</view>
				<view v-else class="no-data">
					<image src="../../static/img/no-data.png" mode="true"></image>
					<text class="datas">暂无数据~</text>
				</view>
			</view>
			<view v-if="tabActiveIdx === 1" style="padding: 20upx 0;">
				<image src="../../static/img/search.png" style="width: 50upx;height: 50upx;position: absolute;right: 40upx;top: 35upx;"></image>
				<view class="select">
					<select style="width: 35%;margin-top: 20upx;height: 60upx;border-radius: 15upx;border-color: rgba(0, 0, 0, 0.1);">
						<option v-for="(item, index) in options" :key="index">{{ item.label }}</option>
					</select>
					<select style="width: 50%;margin-top: 20upx;height: 60upx;border-radius: 15upx;border-color: rgba(15, 15, 15, 0.1);">
						<option v-for="(item, index) in options1" :key="index">{{ item.label }}</option>
					</select>
				</view>
				<view class="tabs" v-for="(item, index) in infos1" :key="index" v-if="infos1.length > 0">
					<view class="tabs-img"><image src="../../static/img/logo.png" mode="true"></image></view>
					<view class="tabs-t">
						<view class="tabs-t1">{{ item.title }}</view>
						<view class="tabs-t2">{{ item.date }}</view>
					</view>
				</view>
				<view class="more-data" v-if="infos1.length > 0">--------无更多数据--------</view>
				<view v-else class="no-data">
					<image src="../../static/img/no-data.png" mode="true"></image>
					<text class="datas">暂无数据~</text>
				</view>
			</view>
		</view>
		<chunLei-popups v-model="value2" :popData="data1" @tapPopup="tapPopup" :x="344" :y="38" placement="top-end" style="font-size: 28upx;">
			
		</chunLei-popups> 
	</view>
</template>

<script>
import Tab from '@/components/xyz-tab/xyz-tab.vue';
import ldSelect from '@/components/ld-select/ld-select.vue';
import DropdownMenu from '@/components/JP-dropdown-menu/JP-dropdown-menu.vue';
import DropdownItem from '@/components/JP-dropdown-menu/JP-dropdown-item.vue';
import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups.vue";
export default {
	data() {
		return {
			tabList: [
				{
					id: 0,
					label: '我的待办'
				},
				{
					id: 1,
					label: '我起草的'
				}
			],
			value: '',
			value1: '',
			options: [
				{
					value: '选项1',
					label: '绩效考核'
				},
				{
					value: '选项2',
					label: '转正申请'
				},
				{
					value: '选项3',
					label: '津贴申请'
				}
			],
			options1: [
				{
					value: '选项1',
					label: '近一个月'
				},
				{
					value: '选项2',
					label: '近三个月'
				}
			],
			infos: [
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 孙山 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				}
			],
			infos1: [
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 孙山 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				},
				{
					title: '2020年7月人力资源部孙山绩效考核',
					date: '05-01 / 任中华 / 沈鹏',
					url: ''
				}
			],
			tabActiveIdx: 0,
		    value2:false,
			data1:[
				{
					id:1,
					title:'转正申请',
					// disabled:true
				},
				{
					id:2,
					title:'津贴申请',
				},
				{
					id:3,
					title:'证明申请',
				},
				{
					id:4,
					title:'辞职申请',
				}
			],
		};
	},
	components: {
		Tab,
		ldSelect,
		DropdownMenu,
		DropdownItem,
		chunLeiPopups
	},
	onLoad() {},
	methods: {
		tapPopup(e){
			console.log(e)
			uni.showToast({
				title:e.title,
				icon:'none'
			})
		},
		tabSelect(idx) {
			this.tabActiveIdx = idx;
		},
		selectChange(val) {
			this.value = val;
		},
		show() {
			this.$refs.rangeDropdown.show();
		}
	}
};
</script>

<style>
page {
	background: #f3f3f3;
}
.tabs {
	width: 94%;
	height: 130upx;
	background: #fff;
	margin: 20upx auto 30upx;
	border-radius: 10upx;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}
.tabs-img {
	width: 21%;
	height: 130upx;
}
.tabs-img image {
	width: 80upx;
	height: 80upx;
	border-radius: 50%;
	margin: 22upx 25upx;
}
.tabs-t {
	width: 79%;
	height: 130upx;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.tabs-t1 {
	width: 100%;
	height: 80upx;
	font-size: 26upx;
	line-height: 80upx;
}
.tabs-t2 {
	width: 100%;
	height: 50upx;
	font-size: 22upx;
	line-height: 30upx;
}
.more-data {
	width: 100%;
	height: 80upx;
	line-height: 80upx;
	text-align: center;
	font-size: 26upx;
	color: #999;
	margin-bottom: 15upx;
	margin-top: 20upx;
}
.no-data {
	width: 100%;
	height: 360upx;
	/* background: red; */
	margin-top: 300upx;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.no-data image {
	width: 200upx;
	height: 150upx;
	position: absolute;
	left: 36%;
}
.datas {
	width: 100%;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	position: absolute;
	top: 160upx;
	font-size: 28upx;
	color: #999;
}
.select {
	width: 100%;
	height: 120upx;
	display: flex;
	justify-content: space-around;
	margin-bottom: 20upx;
	background: #fff;
	margin-top: -25upx;
}
.select ld-select {
	height: 60upx;
}
</style>
